<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时软件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: white;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            transition: background 0.5s ease;
        }
        
        .container {
            background: rgba(0, 0, 0, 0.7);
            border-radius: 20px;
            padding: 40px;
            width: 100%;
            max-width: 650px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            text-align: center;
            position: relative;
            transition: all 0.5s ease;
        }
        
        .minimal-container {
            background: rgba(0, 0, 0, 0.9);
            border-radius: 10px;
            padding: 12px;
            width: 7cm;
            height: 4cm;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
            text-align: center;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 模式切换按钮 - 左上角 */
        .mode-toggle {
            position: absolute;
            top: 6px;
            left: 6px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.8rem;
            color: white;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .mode-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        /* 简洁模式右上角控制按钮 */
        .minimal-controls {
            position: absolute;
            top: 6px;
            right: 6px;
            display: flex;
            gap: 4px;
        }
        
        .minimal-control-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.7rem;
            color: white;
            transition: all 0.3s ease;
        }
        
        .minimal-control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        h1 {
            margin-bottom: 30px;
            font-size: 2.5rem;
            background: linear-gradient(90deg, #ff8a00, #e52e71);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .timer-display {
            font-size: 5rem;
            font-weight: bold;
            margin: 30px 0;
            text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
            letter-spacing: 5px;
            color: #ff3333;
        }
        
        .minimal-timer-display {
            font-size: 2.5rem;
            font-weight: bold;
            text-shadow: 0 0 15px rgba(255, 0, 0, 0.9);
            letter-spacing: 3px;
            color: #ff3333;
            width: 100%;
            height: 2.2cm;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            margin: 8px 0;
            line-height: 1;
        }
        
        .save-section {
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .save-section input {
            padding: 10px 15px;
            font-size: 1rem;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            outline: none;
            width: 200px;
        }
        
        .load-section {
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .load-section select {
            padding: 10px 15px;
            font-size: 1rem;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            outline: none;
            cursor: pointer;
            width: 200px;
        }
        
        .load-section select option {
            background: rgba(0, 0, 0, 0.9);
            color: white;
        }
        
        .time-input {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .time-input div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .time-input label {
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .time-input input {
            width: 100px;
            padding: 15px;
            font-size: 1.5rem;
            text-align: center;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            outline: none;
        }
        
        .buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .minimal-buttons {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: auto;
            margin-bottom: 5px;
        }
        
        button {
            padding: 15px 30px;
            font-size: 1.2rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }
        
        #startBtn {
            background: linear-gradient(90deg, #00b09b, #96c93d);
            color: white;
        }
        
        #pauseBtn {
            background: linear-gradient(90deg, #2193b0, #6dd5ed);
            color: white;
        }
        
        #resetBtn {
            background: linear-gradient(90deg, #ff416c, #ff4b2b);
            color: white;
        }
        
        #saveBtn {
            background: linear-gradient(90deg, #8e2de2, #4a00e0);
            color: white;
        }
        
        #loadSelectedBtn {
            background: linear-gradient(90deg, #f46b45, #eea849);
            color: white;
        }
        
        #deleteSelectedBtn {
            background: linear-gradient(90deg, #ff416c, #ff4b2b);
            color: white;
        }
        
        #minimalStartBtn {
            background: linear-gradient(90deg, #00b09b, #96c93d);
            color: white;
            font-size: 0.8rem;
            padding: 6px 12px;
            border-radius: 15px;
            flex: 1;
            margin: 0 2px;
        }
        
        #minimalPauseBtn {
            background: linear-gradient(90deg, #2193b0, #6dd5ed);
            color: white;
            font-size: 0.8rem;
            padding: 6px 12px;
            border-radius: 15px;
            flex: 1;
            margin: 0 2px;
        }
        
        #minimalResetBtn {
            background: linear-gradient(90deg, #ff416c, #ff4b2b);
            color: white;
            font-size: 0.8rem;
            padding: 6px 12px;
            border-radius: 15px;
            flex: 1;
            margin: 0 2px;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .message {
            margin-top: 30px;
            font-size: 1.5rem;
            min-height: 40px;
            color: #ffcc00;
        }
        
        .saved-count {
            margin-top: 15px;
            font-size: 1rem;
            color: #aaa;
        }
        
        .saved-list {
            margin-top: 20px;
            text-align: left;
            max-height: 150px;
            overflow-y: auto;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        
        .saved-list h3 {
            text-align: center;
            margin-bottom: 10px;
            color: #ffcc00;
        }
        
        .saved-item {
            display: flex;
            justify-content: space-between;
            padding: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .saved-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .saved-item .delete {
            color: #ff4b2b;
            cursor: pointer;
            font-weight: bold;
        }
        
        .hidden {
            display: none !important;
        }
        
        .minimal-title {
            font-size: 0.8rem;
            color: #aaa;
            margin-bottom: 3px;
        }
        
        /* 悬浮模式样式 */
        .floating {
            position: fixed !important;
            top: 20px;
            right: 20px;
            z-index: 1000;
            width: 300px !important;
            transform: scale(0.8);
            transform-origin: top right;
        }
        
        .minimal-floating {
            position: fixed !important;
            top: 20px;
            right: 20px;
            z-index: 1000;
            transform: scale(0.9);
            transform-origin: top right;
        }
        
        /* 窗口控制按钮 */
        .window-controls {
            position: absolute;
            top: 6px;
            right: 6px;
            display: flex;
            gap: 4px;
        }
        
        .control-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.8rem;
            color: white;
            transition: all 0.3s ease;
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        @media (max-width: 600px) {
            .container, .minimal-container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .timer-display {
                font-size: 3.5rem;
            }
            
            .time-input {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
            
            .buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .save-section, .load-section {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 完整模式容器 -->
    <div class="container" id="fullMode">
        <button class="mode-toggle" id="toggleMode">📱</button>
        
        <!-- 窗口控制按钮 - 隐藏、悬浮和关闭 -->
        <div class="window-controls">
            <button class="control-btn" id="hideBtn" title="隐藏界面">─</button>
            <button class="control-btn" id="floatBtn" title="悬浮模式">📌</button>
            <button class="control-btn" id="closeBtn" title="关闭">✕</button>
        </div>
        
        <h1>倒计时软件</h1>
        
        <div class="timer-display" id="display">00:00:00</div>
        
        <div class="save-section">
            <input type="text" id="saveName" placeholder="输入保存名称">
            <button id="saveBtn">保存当前时间</button>
        </div>
        
        <div class="load-section">
            <select id="savedTimes">
                <option value="">选择保存的时间...</option>
            </select>
            <button id="loadSelectedBtn">加载选择的时间</button>
            <button id="deleteSelectedBtn">删除选择的时间</button>
        </div>
        
        <div class="time-input">
            <div>
                <label for="hours">小时</label>
                <input type="number" id="hours" min="0" max="99" value="0">
            </div>
            <div>
                <label for="minutes">分钟</label>
                <input type="number" id="minutes" min="0" max="59" value="10">
            </div>
            <div>
                <label for="seconds">秒钟</label>
                <input type="number" id="seconds" min="0" max="59" value="0">
            </div>
        </div>
        
        <div class="buttons">
            <button id="startBtn">开始</button>
            <button id="pauseBtn">暂停</button>
            <button id="resetBtn">重置</button>
        </div>
        
        <div class="message" id="message">设置时间后点击"开始"按钮</div>
        <div class="saved-count" id="savedCount">已保存: 0/10 组时间</div>
        
        <div class="saved-list" id="savedList">
            <h3>已保存的时间列表</h3>
            <p id="noSavedMessage">暂无保存的时间</p>
        </div>
    </div>

    <!-- 简洁模式容器 -->
    <div class="minimal-container hidden" id="minimalMode">
        <!-- 左上角：返回主界面图标 -->
        <button class="mode-toggle" id="toggleMinimalMode">←</button>
        
        <!-- 右上角：悬浮图标 -->
        <div class="minimal-controls">
            <button class="minimal-control-btn" id="minimalFloatBtn" title="悬浮模式">📌</button>
        </div>
        
        <div class="minimal-title">倒计时</div>
        <div class="minimal-timer-display" id="minimalDisplay">00:00:00</div>
        
        <div class="minimal-buttons">
            <button id="minimalStartBtn">开始</button>
            <button id="minimalPauseBtn">暂停</button>
            <button id="minimalResetBtn">重置</button>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const display = document.getElementById('display');
        const minimalDisplay = document.getElementById('minimalDisplay');
        const hoursInput = document.getElementById('hours');
        const minutesInput = document.getElementById('minutes');
        const secondsInput = document.getElementById('seconds');
        const startBtn = document.getElementById('startBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const resetBtn = document.getElementById('resetBtn');
        const minimalStartBtn = document.getElementById('minimalStartBtn');
        const minimalPauseBtn = document.getElementById('minimalPauseBtn');
        const minimalResetBtn = document.getElementById('minimalResetBtn');
        const saveBtn = document.getElementById('saveBtn');
        const loadSelectedBtn = document.getElementById('loadSelectedBtn');
        const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
        const message = document.getElementById('message');
        const saveNameInput = document.getElementById('saveName');
        const savedTimesSelect = document.getElementById('savedTimes');
        const savedCount = document.getElementById('savedCount');
        const savedList = document.getElementById('savedList');
        const noSavedMessage = document.getElementById('noSavedMessage');
        const toggleModeBtn = document.getElementById('toggleMode');
        const toggleMinimalModeBtn = document.getElementById('toggleMinimalMode');
        const fullMode = document.getElementById('fullMode');
        const minimalMode = document.getElementById('minimalMode');
        
        // 控制按钮
        const hideBtn = document.getElementById('hideBtn');
        const floatBtn = document.getElementById('floatBtn');
        const closeBtn = document.getElementById('closeBtn');
        const minimalFloatBtn = document.getElementById('minimalFloatBtn');
        
        let countdown;
        let isRunning = false;
        let totalSeconds = 0;
        let remainingSeconds = 0;
        let isFloating = false;
        
        // 初始化显示
        updateDisplay();
        updateSavedTimesList();
        updateSavedList();
        
        // 切换模式
        toggleModeBtn.addEventListener('click', function() {
            fullMode.classList.add('hidden');
            minimalMode.classList.remove('hidden');
        });
        
        toggleMinimalModeBtn.addEventListener('click', function() {
            minimalMode.classList.add('hidden');
            fullMode.classList.remove('hidden');
        });
        
        // 隐藏按钮功能
        hideBtn.addEventListener('click', function() {
            fullMode.classList.add('hidden');
            minimalMode.classList.remove('hidden');
        });
        
        // 关闭按钮功能
        closeBtn.addEventListener('click', function() {
            if (confirm('确定要关闭倒计时软件吗？')) {
                // 在实际应用中，这里可能会关闭窗口或退出应用
                // 由于浏览器安全限制，我们只能提示用户
                alert('倒计时软件已关闭。在实际应用中，这里会执行关闭操作。');
            }
        });
        
        // 完整模式悬浮功能
        floatBtn.addEventListener('click', function() {
            isFloating = !isFloating;
            if (isFloating) {
                fullMode.classList.add('floating');
                floatBtn.style.background = 'rgba(255, 255, 255, 0.4)';
                message.textContent = '已进入悬浮模式';
            } else {
                fullMode.classList.remove('floating');
                floatBtn.style.background = 'rgba(255, 255, 255, 0.2)';
                message.textContent = '已退出悬浮模式';
            }
        });
        
        // 简洁模式悬浮功能
        minimalFloatBtn.addEventListener('click', function() {
            isFloating = !isFloating;
            if (isFloating) {
                minimalMode.classList.add('minimal-floating');
                minimalFloatBtn.style.background = 'rgba(255, 255, 255, 0.4)';
                message.textContent = '已进入悬浮模式';
            } else {
                minimalMode.classList.remove('minimal-floating');
                minimalFloatBtn.style.background = 'rgba(255, 255, 255, 0.2)';
                message.textContent = '已退出悬浮模式';
            }
        });
        
        // 保存当前时间
        saveBtn.addEventListener('click', function() {
            const name = saveNameInput.value.trim();
            if (!name) {
                message.textContent = '请输入保存名称';
                return;
            }
            
            const hours = parseInt(hoursInput.value) || 0;
            const minutes = parseInt(minutesInput.value) || 0;
            const seconds = parseInt(secondsInput.value) || 0;
            
            if (hours === 0 && minutes === 0 && seconds === 0) {
                message.textContent = '不能保存空时间';
                return;
            }
            
            const savedPresets = getSavedPresets();
            
            // 检查是否已存在同名项
            const existingIndex = savedPresets.findIndex(item => item.name === name);
            if (existingIndex !== -1) {
                if (!confirm(`已存在名为"${name}"的保存项，是否覆盖？`)) {
                    return;
                }
                // 覆盖现有项
                savedPresets[existingIndex] = {
                    name: name,
                    hours: hours,
                    minutes: minutes,
                    seconds: seconds
                };
            } else {
                // 检查是否已达到10组限制
                if (savedPresets.length >= 10) {
                    if (!confirm('已保存10组时间，是否覆盖最早的一组？')) {
                        return;
                    }
                    // 移除最早的一组
                    savedPresets.shift();
                }
                
                // 添加新项
                savedPresets.push({
                    name: name,
                    hours: hours,
                    minutes: minutes,
                    seconds: seconds
                });
            }
            
            localStorage.setItem('countdownPresets', JSON.stringify(savedPresets));
            message.textContent = `已保存: ${name}`;
            saveNameInput.value = '';
            updateSavedTimesList();
            updateSavedList();
        });
        
        // 加载选择的时间
        loadSelectedBtn.addEventListener('click', function() {
            if (isRunning) {
                message.textContent = '请先停止计时再加载时间';
                return;
            }
            
            const selectedValue = savedTimesSelect.value;
            if (!selectedValue) {
                message.textContent = '请选择要加载的时间';
                return;
            }
            
            const savedPresets = getSavedPresets();
            const preset = savedPresets.find(item => item.name === selectedValue);
            
            if (preset) {
                hoursInput.value = preset.hours;
                minutesInput.value = preset.minutes;
                secondsInput.value = preset.seconds;
                
                totalSeconds = preset.hours * 3600 + preset.minutes * 60 + preset.seconds;
                remainingSeconds = totalSeconds;
                updateDisplay();
                updateMinimalDisplay();
                
                message.textContent = `已加载: ${preset.name}`;
            }
        });
        
        // 删除选择的时间
        deleteSelectedBtn.addEventListener('click', function() {
            const selectedValue = savedTimesSelect.value;
            if (!selectedValue) {
                message.textContent = '请选择要删除的时间';
                return;
            }
            
            if (!confirm(`确定要删除"${selectedValue}"吗？`)) {
                return;
            }
            
            const savedPresets = getSavedPresets();
            const index = savedPresets.findIndex(item => item.name === selectedValue);
            
            if (index !== -1) {
                savedPresets.splice(index, 1);
                localStorage.setItem('countdownPresets', JSON.stringify(savedPresets));
                message.textContent = `已删除: ${selectedValue}`;
                updateSavedTimesList();
                updateSavedList();
                
                // 如果删除的是当前显示的时间，重置输入框
                if (hoursInput.value == savedPresets[index]?.hours && 
                    minutesInput.value == savedPresets[index]?.minutes && 
                    secondsInput.value == savedPresets[index]?.seconds) {
                    hoursInput.value = 0;
                    minutesInput.value = 0;
                    secondsInput.value = 0;
                    totalSeconds = 0;
                    remainingSeconds = 0;
                    updateDisplay();
                    updateMinimalDisplay();
                }
            }
        });
        
        // 开始倒计时 - 完整模式
        startBtn.addEventListener('click', function() {
            startCountdown();
        });
        
        // 开始倒计时 - 简洁模式
        minimalStartBtn.addEventListener('click', function() {
            startCountdown();
        });
        
        // 暂停倒计时 - 完整模式
        pauseBtn.addEventListener('click', function() {
            pauseCountdown();
        });
        
        // 暂停倒计时 - 简洁模式
        minimalPauseBtn.addEventListener('click', function() {
            pauseCountdown();
        });
        
        // 重置倒计时 - 完整模式
        resetBtn.addEventListener('click', function() {
            resetCountdown();
        });
        
        // 重置倒计时 - 简洁模式
        minimalResetBtn.addEventListener('click', function() {
            resetCountdown();
        });
        
        // 开始倒计时函数
        function startCountdown() {
            if (isRunning) return;
            
            // 获取输入的时间
            const hours = parseInt(hoursInput.value) || 0;
            const minutes = parseInt(minutesInput.value) || 0;
            const seconds = parseInt(secondsInput.value) || 0;
            
            totalSeconds = hours * 3600 + minutes * 60 + seconds;
            remainingSeconds = totalSeconds;
            
            if (remainingSeconds <= 0) {
                message.textContent = '请输入有效的时间！';
                return;
            }
            
            isRunning = true;
            message.textContent = '倒计时进行中...';
            startBtn.disabled = true;
            minimalStartBtn.disabled = true;
            saveBtn.disabled = true;
            loadSelectedBtn.disabled = true;
            deleteSelectedBtn.disabled = true;
            
            countdown = setInterval(function() {
                remainingSeconds--;
                
                if (remainingSeconds <= 0) {
                    clearInterval(countdown);
                    isRunning = false;
                    message.textContent = '时间到！';
                    startBtn.disabled = false;
                    minimalStartBtn.disabled = false;
                    saveBtn.disabled = false;
                    loadSelectedBtn.disabled = false;
                    deleteSelectedBtn.disabled = false;
                    
                    // 播放提示音
                    playAlarm();
                    
                    // 闪烁效果 - 修改为红色和黄色交替
                    flashDisplay();
                }
                
                updateDisplay();
                updateMinimalDisplay();
            }, 1000);
            
            updateDisplay();
            updateMinimalDisplay();
        }
        
        // 暂停倒计时函数
        function pauseCountdown() {
            if (!isRunning) return;
            
            clearInterval(countdown);
            isRunning = false;
            message.textContent = '已暂停';
            startBtn.disabled = false;
            minimalStartBtn.disabled = false;
            saveBtn.disabled = false;
            loadSelectedBtn.disabled = false;
            deleteSelectedBtn.disabled = false;
        }
        
        // 重置倒计时函数
        function resetCountdown() {
            clearInterval(countdown);
            isRunning = false;
            remainingSeconds = totalSeconds;
            updateDisplay();
            updateMinimalDisplay();
            message.textContent = '已重置';
            startBtn.disabled = false;
            minimalStartBtn.disabled = false;
            saveBtn.disabled = false;
            loadSelectedBtn.disabled = false;
            deleteSelectedBtn.disabled = false;
            // 重置为红色显示
            display.style.color = '#ff3333';
            minimalDisplay.style.color = '#ff3333';
        }
        
        // 更新完整模式显示
        function updateDisplay() {
            const hours = Math.floor(remainingSeconds / 3600);
            const minutes = Math.floor((remainingSeconds % 3600) / 60);
            const seconds = remainingSeconds % 60;
            
            display.textContent = 
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 更新简洁模式显示
        function updateMinimalDisplay() {
            const hours = Math.floor(remainingSeconds / 3600);
            const minutes = Math.floor((remainingSeconds % 3600) / 60);
            const seconds = remainingSeconds % 60;
            
            minimalDisplay.textContent = 
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 获取保存的预设
        function getSavedPresets() {
            const saved = localStorage.getItem('countdownPresets');
            return saved ? JSON.parse(saved) : [];
        }
        
        // 更新保存时间列表
        function updateSavedTimesList() {
            const savedPresets = getSavedPresets();
            savedTimesSelect.innerHTML = '<option value="">选择保存的时间...</option>';
            
            savedPresets.forEach(preset => {
                const option = document.createElement('option');
                option.value = preset.name;
                option.textContent = `${preset.name} (${preset.hours.toString().padStart(2, '0')}:${preset.minutes.toString().padStart(2, '0')}:${preset.seconds.toString().padStart(2, '0')})`;
                savedTimesSelect.appendChild(option);
            });
            
            // 更新保存计数
            savedCount.textContent = `已保存: ${savedPresets.length}/10 组时间`;
        }
        
        // 更新保存列表显示
        function updateSavedList() {
            const savedPresets = getSavedPresets();
            savedList.innerHTML = '<h3>已保存的时间列表</h3>';
            
            if (savedPresets.length === 0) {
                savedList.innerHTML += '<p id="noSavedMessage">暂无保存的时间</p>';
                return;
            }
            
            // 移除"暂无保存的时间"消息
            if (noSavedMessage) noSavedMessage.style.display = 'none';
            
            savedPresets.forEach((preset, index) => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'saved-item';
                itemDiv.innerHTML = `
                    <span>${preset.name} (${preset.hours.toString().padStart(2, '0')}:${preset.minutes.toString().padStart(2, '0')}:${preset.seconds.toString().padStart(2, '0')})</span>
                    <span class="delete" data-index="${index}">×</span>
                `;
                
                // 点击加载时间
                itemDiv.addEventListener('click', function(e) {
                    if (e.target.classList.contains('delete')) return;
                    
                    if (isRunning) {
                        message.textContent = '请先停止计时再加载时间';
                        return;
                    }
                    
                    hoursInput.value = preset.hours;
                    minutesInput.value = preset.minutes;
                    secondsInput.value = preset.seconds;
                    
                    totalSeconds = preset.hours * 3600 + preset.minutes * 60 + preset.seconds;
                    remainingSeconds = totalSeconds;
                    updateDisplay();
                    updateMinimalDisplay();
                    
                    message.textContent = `已加载: ${preset.name}`;
                });
                
                // 删除按钮
                const deleteBtn = itemDiv.querySelector('.delete');
                deleteBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const index = parseInt(this.getAttribute('data-index'));
                    deleteSavedPreset(index);
                });
                
                savedList.appendChild(itemDiv);
            });
        }
        
        // 删除保存的预设
        function deleteSavedPreset(index) {
            const savedPresets = getSavedPresets();
            if (index >= 0 && index < savedPresets.length) {
                const presetName = savedPresets[index].name;
                if (!confirm(`确定要删除"${presetName}"吗？`)) {
                    return;
                }
                savedPresets.splice(index, 1);
                localStorage.setItem('countdownPresets', JSON.stringify(savedPresets));
                updateSavedTimesList();
                updateSavedList();
                message.textContent = `已删除: ${presetName}`;
            }
        }
        
        // 播放提示音
        function playAlarm() {
            // 创建音频上下文
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.type = 'sine';
            oscillator.frequency.value = 800;
            gainNode.gain.value = 0.5;
            
            oscillator.start();
            
            // 0.5秒后停止
            setTimeout(() => {
                oscillator.stop();
            }, 500);
        }
        
        // 闪烁效果 - 修改为红色和黄色交替
        function flashDisplay() {
            let flashCount = 0;
            const flashInterval = setInterval(() => {
                display.style.color = display.style.color === '#ff3333' ? '#ffff00' : '#ff3333';
                minimalDisplay.style.color = minimalDisplay.style.color === '#ff3333' ? '#ffff00' : '#ff3333';
                flashCount++;
                
                if (flashCount >= 10) {
                    clearInterval(flashInterval);
                    display.style.color = '#ff3333'; // 恢复为红色
                    minimalDisplay.style.color = '#ff3333'; // 恢复为红色
                }
            }, 500);
        }
    </script>
</body>
</html>